<template>
  <div>

    <!--查询 && 筛选部分-->
    <div class="dw-table-form" style="padding-left: 60px;">
      <el-form :inline="true"  class="dw-form-inline" size="medium" >
        <!--按照标题查询-->
        <el-form-item label="问卷标题">
          <el-input
              v-model="name"
              placeholder="请输入查询的问卷标题"
              @keyup.enter.native="queryList"
          ></el-input> <!--加入了enter按钮调用方法-->
        </el-form-item>
        <!--按照状态查询-->
        <el-form-item label="问卷状态" style="margin-left: 40px;">
          <el-select
              placeholder="请选择问卷状态"
              clearable
              v-model="bindValue"
              @change="filterData"
          >
            <el-option label="设计中" value="0" ></el-option>
            <el-option label="收集中" value="1"></el-option>
            <el-option label="收集结束" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 40px;">
          <el-button type="primary" @click="queryList">
            <el-icon style="vertical-align: middle;">
              <search />
            </el-icon>
            <Span>查询</Span>
          </el-button>
          <el-button @click="resetParam">重置</el-button>
          <el-button type="primary" @click="createSurvey" >
            <el-icon style="vertical-align: middle;">
              <Plus />
            </el-icon>
            <Span>新建</Span>
          </el-button>
        </el-form-item>
      </el-form>
    </div>



    <div class="dw-table-title">
      <el-row :span="24" type="flex" justify="space-between" align="middle">
        <el-col :span="4"><h3>我的问卷</h3></el-col>
        <el-col :span="18" style="text-align: right;"> <el-button icon="Delete" @click="dialogVisible=true">回收站</el-button>
        </el-col>
        <el-col :span="2"></el-col>
      </el-row>
    </div>


    <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%;"
        ref="multipleTableRef"
        @selection-change="handleSelectionChange">

      <el-table-column prop="surveyName" label="问卷名"  width="400px"/>
      <el-table-column label="答卷数" prop="answerNum" width="70px" />
      <el-table-column label="状态"  prop="state" width="100px" :formatter="stateFormate"/>
      <el-table-column label="创建时间"  prop="createDate"/>
      <el-table-column label="操作" >
        <template #default="scope" class="ml-4">
          <el-button-group class="ml-4">
            <el-tooltip class="item" effect="dark" content="编辑问卷" placement="top-start">
              <el-button type="primary" @click="buttonClickB(`../EditQuestionnaire`,scope.row.id)">
                <el-icon style="vertical-align: middle;">
                  <Edit />
                </el-icon>
              </el-button>
            </el-tooltip>

            <el-tooltip class="item" effect="dark" content="分享问卷" placement="top-start">
              <el-button type="primary" @click="buttonClickB('/survey/ShareSurvey',scope.row.id)">
                <el-icon style="vertical-align: middle;">
                  <Share />
                </el-icon>
              </el-button>
            </el-tooltip>

            <el-tooltip class="item" effect="dark" content="预览问卷" placement="top-start">
              <el-button type="primary" @click="buttonClickB('../PreviewQuestionnaire',scope.row.id)">
                <el-icon style="vertical-align: middle;">
                  <View />
                </el-icon>
              </el-button>
            </el-tooltip>

            <el-tooltip class="item" effect="dark" content="查看答者" placement="top-start" >
              <el-button type="primary" @click="loadPostUser(scope.row.id)">
                <el-icon style="vertical-align: middle;">
                  <Copy-document />
                </el-icon>
              </el-button>
            </el-tooltip>


            <el-popconfirm title="确定要删除嘛？" @confirm="del(scope.row.id)" style="margin-right: 5px"> <!--确认删除按钮-->
              <template #reference>
                <el-tooltip class="item" effect="dark" content="删除问卷" placement="top-start">
                  <el-button type="primary" @click="del(scope.row.id)">
                    <el-icon style="vertical-align: middle;">
                      <Delete />
                    </el-icon>
                  </el-button>
                </el-tooltip>
              </template>
            </el-popconfirm>

          </el-button-group>
        </template>
      </el-table-column>

    </el-table>





    <!--分页模块-->
    <!--分页模块-->
    <div class="demo-pagination-block" style="margin-top: 10px; float: right;">
      <el-pagination
          v-model:currentPage="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 15, 20]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>



    <div>
      <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" append-to-body width="40%" >
        <el-form :model="form" label-position="top">
          <el-form-item :label-width="formLabelWidth" label="问卷标题" >
            <el-input v-model="form.name" autocomplete="off" placeholder="请输入问卷标题" ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleDialogConfirm">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <!--    回收站模块-->
    <el-dialog
        v-model="dialogVisible"
        title="回收站"
        width="70%"
    >
      <span>
          <el-table
              :data="deleteData"
              stripe
              border
              style="width: 100%;"
              ref="multipleTableRef"
              @selection-change="handleSelectionChange">

      <el-table-column prop="surveyName" label="问卷名"  width=300px />
      <el-table-column label="答卷数" prop="answerNum" width=100px />
      <el-table-column label="删除时间"  prop="createDate" width=200px />
      <el-table-column label="操作" width=400px>
        <template #default="scope" class="ml-4">
          <el-row class="mb-4">
              <el-button @click="redel(scope.row.id)">恢复</el-button>
            <el-button type="primary" @click="chedidel(scope.row.id)">彻底删除</el-button></el-row>
        </template>
      </el-table-column>

    </el-table>
      </span>
      <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          确定
        </el-button>
      </span>
      </template>
    </el-dialog>


    <!--弹出装有群组成员信息抽屉-->
    <div>
      <el-drawer
              v-model="table"
              title="答者信息"
              direction="rtl"
              size="50%"
      >
        <el-divider />
        <!--用户信息展示表格-->
        <el-table :data="tableDataUser"
                  stripe
                  style="width: 100%;"
        >

          <el-table-column type="expand">
            <template #default="props">
              <div m="4">
                <p m="t-0 b-2">费用: {{ props.row.fee }}</p>
                <p m="t-0 b-2">电子邮箱: {{ props.row.email }}</p>
                <p m="t-0 b-2">所在省份: {{ props.row.province }}</p>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="id" label="Id" width="60" />
          <el-table-column prop="username" label="用户名" />
          <el-table-column prop="phone" label="电话号码" />
          <el-table-column prop="sex" label="性别" />
          <el-table-column  label="操作" width="70">
            <template #default="scope"  slot-scope="scope"> <!--通过 scope 实现一行数据的传入-->
              <el-button-group class="ml-1">
                <el-popconfirm title="确定要删除嘛？" @confirm="delGroupUser(scope.row.id)" style="margin-right: 5px"> <!--确认删除按钮-->
                  <template #reference  slot-scope="scope">
                    <el-button type="primary">
                      <el-icon style="vertical-align: middle;">
                        <Delete />
                      </el-icon>
                    </el-button>
                  </template>
                </el-popconfirm>
              </el-button-group>
            </template>
          </el-table-column>

        </el-table>

      </el-drawer>
    </div>

  </div>
</template>


<script>
// import {SurveyCreate, SurveyList} from '@/api/survey'
// import {SurveyCopy, SurveyDelete} from '../../api/survey'
import {
  ArrowLeft,
  ArrowRight,
  Delete,
  Edit,
  Share,
} from '@element-plus/icons-vue'

export default {
  name: "SurveyList",
  data() {
    return {
      dialogVisible:false,
      Delete,
      tenantId: 0,
      name: '', // 参与模糊搜索的值
      bindValue: '',
      tableData: [],
      pageSize: 5, // 每页数据条数
      currentPage: 1, // 当前页
      total: 0,
      deleteData:[],
      deletetotal:0,
      dialogTitle: '创建问卷',
      form: {
        id: '',
        surveyName: '',
        answerNum: 100,
        state: '',
        createDate: ''
      },
      dialogFormVisible: false,
      formLabelWidth: '120px',
      tableDataUser:[], // 抽屉中数据
      table: false, // 展示抽屉
      groupId: 0
    }
  },
  mounted() {
    this.queryList(),
        this.queryhuishou();
  },
  methods: {
    // 分页方法
    handleSizeChange(val){ // 得到 PageSize 的方法
      //console.log(`${val} items per page`)
      this.currentPage = 1;
      this.pageSize = val;
      this.queryList()
    },
    setTenantId(){ // 得到当前租户 id
      this.tenantId = this.$store.getters.getUser.data.id
      console.log("租户id" + this.tenantId)
    },
    handleCurrentChange (val){ // 得到当前页的方法
      console.log(`current page: ${val}`)
      this.currentPage = val;
      this.queryList()
    },
    stateFormate(row){ // 格式化问卷状态栏
      if(row.state == 0){
        return "设计中"
      } else if(row.state == 1){
        return "收集中"
      } else if(row.state == 2){
        return "收集结束"
      } else{
        return "未定义"
      }
    },
    // 筛选不同状态的问卷
    filterData(){
      console.log(this.bindValue) // 拿到需要筛选出的问卷状态
      this.$axios.post("/survey-base/listPageStatus", {
        pageSize: this.pageSize,
        pageNum: this.currentPage, // 传递分页参数
        param: {
          bindValue: this.bindValue // 传递模糊查询条件
        }
      }).then(res => res.data).then(res => {
        if (res.code == 200) {
          console.log(res.data)
          this.tableData = res.data.records;
          this.total = res.data.total;
        } else {
          alert('获取数据失败')
        }
      })

    },
    buttonClickA (href){
      this.$router.push(href);
    },

    buttonClickB(href,id){
      this.$router.push({
        path:href,
        query:{
          sid:id
        }
      });

    },
    // 彻底删除问卷的方法
    chedidel(id){
      console.log(id);
      if(this.form.id == null || this.form.id == ''){
        this.$confirm('是否彻底删除该问卷？', '系统提示', {confirmButtonText: '彻底删除'}).then(({value}) => {
          this.$axios.get("/survey-base/chedidelete?id=" + id).then(res=>res.data).then(res=>{
            if(res.code == 200){
              this.queryhuishou()
              this.resetParam()
              this.queryList()
            }
          })
        }).catch(() => {
          this.queryhuishou()
        })

      } else {
        this.doMod()
      }
    },
    del(id){
      console.log(id);
      if(this.form.id == null || this.form.id == ''){
        this.$confirm('是否删除该问卷？', '系统提示', {confirmButtonText: '删除'}).then(({value}) => {
          this.$axios.get("/survey-base/delete?id=" + id).then(res=>res.data).then(res=>{
            if(res.code == 200){
              this.queryList()
              this.queryhuishou()
              this.resetParam()
            }
          })
        }).catch(() => {
          this.queryhuishou()
        })

      } else {
        this.doMod()
      }
    },
    redel(id){
      console.log(id);
      if(this.form.id == null || this.form.id == ''){
        this.$confirm('是恢复该问卷？', '系统提示', {confirmButtonText: '恢复'}).then(({value}) => {
          this.$axios.get("/survey-base/redelete?id=" + id).then(res=>res.data).then(res=>{
            if(res.code == 200){
              this.queryList()
              this.queryhuishou()
              this.resetParam()
            }
          })
        }).catch(() => {
          this.queryhuishou()
        })
      } else {
        this.doMod()
      }
    },
    queryList() {
      this.$axios.post("/survey-base/listPageC1", {
        pageSize: this.pageSize,
        pageNum: this.currentPage, // 传递分页参数
        param: {
          name: this.name // 传递模糊查询条件
        }
      }).then(res => res.data).then(res => {
        if (res.code == 200) {
          console.log(res.data)
          this.tableData = res.data.records;
          this.total = res.data.total;
        } else {
          alert('获取数据失败')
        }
      })
    },
    queryhuishou(){
      this.$axios.post("/survey-base/listPageHS", {
        pageSize: this.pageSize,
        pageNum: this.currentPage, // 传递分页参数
        param: {
          name: this.name // 传递模糊查询条件
        }
      }).then(res => res.data).then(res => {
        if (res.code == 200) {
          console.log(res.data+"hhhhhhh")
          this.deleteData = res.data.records;
          this.deletetotal = res.data.total;
        } else {
          alert('获取数据失败')
        }
      })
    },
    resetParam(){ // 重置按钮
      this.name = ''; // 设置查询条件为空
      this.queryList(); // 重新加载表格
    },
    createSurvey () {
      this.dialogFormVisible = false
      this.$confirm('问卷创建成功，点击“继续编辑问卷”进入问卷编辑。', '系统提示', {confirmButtonText: '继续编辑问卷'}).then(({value}) => {
        this.$router.push('../../DesignQuestionnaire')
      }).catch(() => {
        this.queryList(1)
      })

    },
    loadPostUser(id){ // 得到抽屉中表格的数据
      console.log("要加载答者的群问卷 id为" + id)
      this.groupId = id
      this.$axios.post("/user/listGroupById", {
        id : id + ''
      }).then(res=>res.data).then(res=>{
        if(res.code == 200){
          console.log(res.data)
          this.tableDataUser = res.data;
        } else{
          alert('获取数据失败')
        }
      })
      this.table = true
    },
    delGroupUser(id){ // 删除群组中特定成员
      console.log("要删除的用户id为" + id)
      console.log("要在id为" + this.groupId + "中删除")
      this.$axios.post("/group-log/delete",
              {
                memberId: id + '',
                groupId: this.groupId + ''
              }
      ).then(res=>res.data).then(res=>{ // 和后端建立连接
        if(res.code == 200){
          console.log("建立成功")
          this.loadPostUser(this.groupId);
        }
      })
    },
  },

}

</script>


<style scoped>
.dw-table-form{
  background-color: white;
  padding: 20px;
  margin-bottom: 20px;
}
.dw-table{
  background: white;
  padding: 20px;
}
.dw-table .dw-table-title{
  padding-bottom: 20px;
  border-bottom: 1px solid #f3f3f3;
}
.dw-table .dw-table-title h3{
  padding: 0px;
  margin: 0px;
}
.el-form-item{
  margin-bottom: 0px;
}
.dw-pagination{
  padding-top: 20px;
  text-align: right;
}
</style>